<template>
  <div class="hello">
    <MapboxScene
        :map="{
          center: [110.19382669582967, 50.258134],
          pitch: 0,
          style: 'blank',
          zoom: 1,
        }"
        :style="{
          position: 'relative',
          width: '100%',
          height: '452px',
        }"
      >
        <!-- <template slot-scope="{ Scene }">
          <HeatmapLayer
            :Scene="Scene"
            :source="{
              data: grid,
              transforms: [
                {
                  type: 'hexagon',
                  size: 800000,
                  field: 'capacity',
                  method: 'sum',
                },
              ],
            }"
            :color="{
              values: '#ddd',
            }"
            :shape="{
              values: 'hexagon',
            }"
            :style="{
              coverage: 0.7,
              opacity: 0.8,
            }"
          />
          <PointLayer
            :Scene="Scene"
            :options="{
              autoFit: true,
            }"
            :source="{
              data,
            }"
            :scale="{
              values: {
                color: {
                  field: 'cum_conf',
                  type: 'quantile',
                },
                size: {
                  field: 'cum_conf',
                  type: 'log',
                },
              },
            }"
            :color="{
              field: 'cum_conf',
              values: colors,
            }"
            :shape="{
              values: 'circle',
            }"
            :active="{
              option: {
                color: '#0c2c84',
              },
            }"
            :size="{
              field: 'cum_conf',
              values: [0, 30],
            }"
            :style="{
              opacity: 0.8,
            }"
          />
          <PointLayer
            :Scene="Scene"
            :source="{
              data,
            }"
            :color="{
              values: '#fff',
            }"
            :shape="{
              field: 'Short_Name_ZH',
              values: 'text',
            }"
            :filter="{
              field: 'cum_conf',
              values: (v) => {
                return v > 2000;
              },
            }"
            :size="{
              values: 12,
            }"
            :style="{
              opacity: 1,
              strokeOpacity: 1,
              strokeWidth: 0,
            }"
          />
        </template> -->
      </MapboxScene>
  </div>
</template>

<script>
// PointLayer
// PointLayer, HeatmapLayer
import { MapboxScene } from '@/lib/l7-vue';
// import { Scene } from '@antv/l7';
// import { Mapbox } from '@antv/l7-maps';
// import {  } from '@antv/l7';
// import DataJson from './data.json';
// import GridJson from './grid.json';
// const colors = ['#eff3ff', '#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#084594'];
export default {
  // name: 'map',
  components: {
    MapboxScene,
    // PointLayer,
    // HeatmapLayer,
  },
  props: {
    

  },
  data() {
    return {
      // data: DataJson,
      // grid: GridJson,
      // colors,
    }
  },
  mounted() {
    // this.initData();
  },
  methods: {
    initData() {
      // console.log('DataJson', DataJson)
      // var scene = new Scene({
      //   id: 'map',
      //   mapStyle: 'light', // 样式URL
      //   center: [116.49434030056, 39.868073421167621],
      //   pitch: 0,
      //   zoom: 16
      // });
      // scene.on('loaded', function() {
        
      //   // $.get('https://gw.alipayobjects.com/os/basement_prod/c3f8bda2-081b-449d-aa9f-9413b779205b.json', function(data) {
      //     scene.HeatmapLayer({
      //       zIndex: 2,
      //     }).source(DataJson, {
      //       parser: {
      //         type: 'json',
      //         x: 'lng',
      //         y: 'lat'
      //       },
      //       transforms: [{
      //         type: 'hexagon',
      //         size: 50,
      //         field: 'count',
      //         method: 'sum'
      //     }]
      //     }).size('sum', function(value) {
      //       return value;
      //     }).shape('hexagon').style({
      //       coverage: 0.8,
      //       angle: 0
      //     }).color('count', ["#002466", "#105CB3", "#2894E0", "#CFF6FF", "#FFF5B8", "#FFAB5C", "#F27049", "#730D1C"]).render();
      //   });
      // });
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
